<template>
  <div class="content">
    <!-- 分页器 -->
    <div class="fr page">
      <div class="sui-pagination clearfix">
        <ul>
          <button
            class="prev"
            :disabled="pageNo == 1"
            @click="$emit('getpageNo', pageNo - 1)"
          >
            «上一页
          </button>
          <li
            v-if="startNumEndNum.start > 1"
            @click="$emit('getpageNo', 1)"
            :class="pageNo == 1 ? 'active':''"
          >
            <a>1</a>
          </li>
          <li class="dotted" v-if="startNumEndNum.start > 2">
            <span>...</span>
          </li>
          <li
            v-for="(page, index) in startNumEndNum.end"
            :key="index"
            v-if="page >= startNumEndNum.start"
            @click="$emit('getpageNo', page)"
            :class="pageNo == page ? 'active':''"
          >
            <a>{{ page }}</a>
          </li>
          <li class="dotted" v-if="startNumEndNum.end < totalPage - 1">
            <span>...</span>
          </li>
          <li v-if="startNumEndNum.end < totalPage" :class="pageNo == totalPage ? 'active':''">
            <a>{{ totalPage }}</a>
          </li>
          <button
            class="next"
            :disabled="startNumEndNum.end == totalPage"
            @click="$emit('getpageNo', pageNo + 1)"
          >
            <a>下一页»</a>
          </button>
        </ul>
        <div>
          <span>共{{ total }}页&nbsp;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["pageNo", "pageSize", "total", "continues"],
  computed: {
    totalPage() {
      // 向上取整
      return Math.ceil(this.total / this.pageSize);
    },
    // 计算出连续的页码数的起始和结束数字
    startNumEndNum() {
      const { continues, pageNo, totalPage } = this;
      let start = 0,
        end = 0;
      if (continues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        start = pageNo - parseInt(continues / 2);
        end = pageNo + parseInt(continues / 2);
      }
      if (start < 1) {
        start = 1;
        end = continues;
      }
      if (end > totalPage) {
        end = totalPage;
        start = totalPage - continues + 1;
      }
      return { start, end };
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  text-align: center;
  button {
    margin: 10px 20px;
  }
  .page {
    width: 100%;
    height: 66px;
    overflow: hidden;
    float: right;
    .sui-pagination {
      margin: 18px 0;

      ul {
        margin-left: 0;
        margin-bottom: -29px;
        vertical-align: middle;
        width: 90%;
        float: left;

        li {
          line-height: 18px;
          display: inline-block;

          a {
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #e0e9ee;
            margin-left: -1px;
            font-size: 14px;
            padding: 9px 18px;
            color: #333;
          }
          &.active {
            a {
              background-color: #fff;
              color: #e1251b;
              border-color: #fff;
              cursor: default;
            }
          }

          &.prev {
            a {
              background-color: #fafafa;
            }
          }

          &.disabled {
            a {
              color: #999;
              cursor: default;
              pointer-events: "none";
            }
          }

          &.dotted {
            span {
              margin-left: -1px;
              position: relative;
              float: left;
              line-height: 18px;
              text-decoration: none;
              background-color: #fff;
              font-size: 14px;
              border: 0;
              padding: 9px 18px;
              color: #333;
            }
          }

          &.next {
            a {
              background-color: #fafafa;
            }
          }
        }
      }

      div {
        color: #333;
        font-size: 14px;
        float: right;
        width: 241px;
      }
    }
  }
}
</style>